/* 基本的 Redux 的使用 */
import { createStore, applyMiddleware } from 'redux';
/* log 日志 */
import logger from 'redux-logger';
/* 副作用操作 */
import thunk from 'redux-thunk';

import reducer from './redux/reducer';

// import {
//   increaseAction,
//   decreaseAction
// } from './redux/action';

/*
  1、 redux
    >> store
      state 的容器

      >> reducer
      纯函数

      >> action
        对象
*/

/**
 * 仓库1
 * @param {Function} store 创建的仓库
 * @returns {Function} dispatch 返回一个dispatch
 */
function loggerMiddleware(store) {
  console.group('logger 中间件');
  return next => {
    // console.log('中间件1 dispath中的action', next)
    return action => {
      // console.log('中间件1', store, store.getState());

      console.groupEnd();
      return next(action);
    };
  };
}
function logger2(store) {
  console.group('logger2 中间件');
  // store 中含有两个函数 getState, dispatch
  console.log('中间件2', store, store.getState());

  // console.log('redux---thunk =======', thunk)

  // 可以在此做异步操作
  // anythingAsyncFun()
  // 激活 dispatch 时触发该放回函数
  return next => action => {
    // console.log('中间件2处理函数', next, action)
    // console.log('中间件之前的数据', store.getState())

    // 调用 middleware 链中下一个 middleware 的 dispatch。
    const returnValue = next(action);

    // console.log('中间件处理后的数据', store.getState())
    console.groupEnd();
    return returnValue;
  };
}

/**
 * 两个参数 1.函数方法 2.store初始值（可选）3.中间件（可选）可以放置多个中间件函数
 * reducer 纯函数方法
 * {} 初始值
 * 中间件
 */
const reduxStore = createStore(
  reducer,
  {
    nameSpace: 'reduxStore',
    count: '0713',
    name: 'tlx'
  },
  applyMiddleware(
    /*
    由于 thunk 的存在，允许action是一个带有副作用的函数
    正常action：{type: xx, payload: xxx}
    thunk存在action书写方式：() => {xxx}
  */
    thunk,
    // loggerMiddleware, logger2,
    logger // redux-logger 尽量放置在最后面
  )
);

// 创建方法二
// applyMiddleware(loggerMiddleware, logger2)(createStore)(reducer,{})

export default reduxStore;
